<!--根组件,用来装所有的组件,比如登录或者admin后台-->


<template>
  <!-- 通常编写组件的html结构，注意vue2.0中一定要有一个根元素 -->
  <div class="tmpl">
    <div class="section">
      <div class="location">
        <span>当前位置：</span>
        <a href="/index.html">首页</a> &gt;
        <a href="/login.html">会员登录</a>
      </div>
    </div>
    <div class="section">
      <div class="wrapper">
        <div class="bg-wrap">
          <div class="nav-tit">
            <a class="selected" href="javascript:;">账户登录</a>
            <i>|</i>
            <a href="/register.html">免费注册</a>
          </div>

          <form id="loginform" name="loginform" class="login-box" >
            <div class="input-box">
              <input id="txtUserName" name="txtUserName" v-model='form.user_name'  type="text" placeholder="用户名/手机/邮箱" maxlength="50">
            </div>
            <div class="input-box">
              <input id="txtPassword" name="txtPassword" v-model='form.password' type="password" placeholder="输入登录密码" maxlength="16">
            </div>
            <div class="btn-box">
              <input id="btnSubmit" name="btnSubmit" type="button" @click='login' value="立即登录">
            </div>
            <div id="msgtips" class="tip-box"></div>
            <input id="turl" name="turl" type="hidden" value="http://localhost:8020/cart.html">
            <!--记住上一页网址-->
          </form>

        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
    // 引入一个模块,处理点击登录的时候,通知layout.vue组件刷新顶部的状态
    import {
        vm
    } from '../kits/vm.js';

    // es6的export default{ 写法等同于 module.exports={
    export default {
        // es6的写法 data() 等同于es5的 data:function()
        data() {
            return {
                form: {
                    user_name: '',
                    password: ''
                }
            }
        },
        methods: {
            login() {
                var url = '/site/account/login';
                this.$http.post(url, this.form).then(res => {
                    if (res.data.status == 1) {
                        // 失败
                        this.$message.error(res.data.message);
                    }
                    // 成功  登录成功跳转到原来进来的页面
                    // 思路: 在main.js里面 在进行登录验证的时候,把to.name的东西,存在本地,然后再这里再从本地取值,就做到了从哪来进来,登录成功后跳转到刚才进来的那里
                    var toNameUrl = localStorage.getItem('toNameUrl'); // 获取存储上一次地跳转进来的路由名称
                    if (toNameUrl) {
                        toNameUrl = toNameUrl;
                    } else {
                        toNameUrl = 'car';
                    }

                    // 全局事件总线
                    // 触发组件 A 中的事件
                    vm.$emit('ilogin', true);


                    this.$router.push({
                        name: toNameUrl
                    });

                })
            }
        }
    }
</script>

<style>

</style>


<!--
<style></style>  中的样式是全局的
<style scoped></style> 中的样式是当前组件的

-->